<template>
    <div class="comment">

        <div class="comment_fa">
            <a-textarea @change="test" :allowClear="true" class="push_comment" v-model:value="state.params.comment_text"
                :placeholder="state.placeholderText" :rows="4" />
            <a-button class="button" @click="sendComment">发 送</a-button>
        </div>


        <a-comment v-for="item, index in data.article_comment" :key="index">
            <template #actions>
                <span key="comment-basic-reply-to" @click="replyTo(item, item)">回复1</span>
            </template>
            <template #author><a>{{ item.user_name }}</a></template>
            <template #avatar>
                <a-avatar :src="item.user_img" :alt="item.user_name" />
            </template>
            <template #content>
                <p>
                    {{ item.comment_text }}
                </p>
            </template>
            <a-comment v-for="v, i in item.comment_children
" :key="i">
                <template #actions>
                    <span @click="replyTo(item, v)">回复2</span>
                </template>
                <template #author>
                    <a>{{ v.user_name }} 回复 {{ v.user_reply_name }}</a>
                </template>
                <template #avatar>
                    <a-avatar :src="v.user_img" :alt="v.user_name" />
                </template>
                <template #content>
                    <p>
                        {{ v.comment_text }}
                    </p>
                </template>
            </a-comment>

            <a-skeleton v-if="item.loading" avatar :paragraph="{ rows: 2 }" />
            <div class="more" @click="getMore(item)">展开更多</div>


        </a-comment>

        <a-spin v-if="data.loading" />
        <div v-else class="test" @click="loadMore">加载更多..</div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { ArticleInfoType, comment } from "@/types/response/home";
import http,{ getItem } from "@/utils";
import { onMounted } from "vue";

const props = defineProps<{
    data: ArticleInfoType
}>()

const emits = defineEmits(["refresh"])

const state: any = reactive({
    loading: false,
    placeholderText: "善语结善缘，恶言伤人心",
    params: {
        comment_text: "",
        comment_father_id: 0,
        article_id: props.data.article_id,
        user_reply_id: 0
    }
})

onMounted(() => {

})

const test = () => {
    if (state.params.comment_text.length == 0) {
        state.params.comment_father_id = 0;
        state.params.user_reply_id = 0;
        state.placeholderText = "善语结善缘，恶言伤人心"
    }
}

const replyTo = (item: comment, v: comment) => {
    state.params.comment_father_id = item.comment_id
    state.params.user_reply_id = v.user_id;
    state.params.comment_text = "";
    state.placeholderText = `${getItem("userInfo").user_name} 回复 ${v.user_name}`
}

const sendComment = async () => {
    await http.pushComment(state.params)
    state.params.comment_text = "";
    test()
    emits("refresh")
}


const loadMore = () => {
    console.log("data: ", props.data);

    props.data.loading = true;
    setTimeout(() => {
        props.data.loading = false;
    }, 4000)
}

const getMore = (item: comment) => {
    item.loading = true
    setTimeout(() => {
        item.loading = false;
    }, 4000)
}

</script>

<style lang="less" scoped>
.comment {
    /deep/ .anticon.ant-input-clear-icon-hidden {
        visibility: inherit;
    }

    .comment_fa {
        margin-bottom: 20px;

        .button {
            margin-top: 10px;
        }

        .push_comment {
            resize: none;
        }
    }

}
</style>